<template>
  <div :style="{ height: activeHei + 'px' }">
    <yd-ls-layout
      title="联系客服"
      :onfoot=false
      :tolfurl="urls"
      torgicon="phone1"
      @handle-rgicon-button="call">
      <!-- <div :style="{ height: activeHei + 'px'}">
        <div class="yd-ls-contact-sent" style="position:fixed;bottom:0;left:0;z-index:10;width:100%;">
          <yd-flexbox class="yd-ls-contact-sent-box">
            <yd-flexbox-item><input type="text" @focus="focusInput" v-model="msgtxt"></yd-flexbox-item>
            <yd-button type="primary" shape="circle" @click.native="sendMsg">发送</yd-button>
          </yd-flexbox>
        </div>
      </div> -->
      <div style="position:absolute;top:0;left:0;z-index: 9;overflow:auto;width:100%;" id="myData" :style="{ height: activeHei + 'px' }">
        <div class="yd-ls-height"></div>
        <yd-pullrefresh :callback="loadList" ref="pullrefreshDemo" :stopDrag="hasDrag">
          <yd-ls-message>
            <yd-ls-message-pearl pos="left">
              <span slot="img"><img :src="contactHeader"/></span>
              <span slot="message">
                  <p class="msg-con">
                    亲爱的患者，您们好，如果您有疑问或者对我们的建议，请在这里留言告诉我们，我一定会仔细阅读你的每一条信息，并及时回复！
                  </p>
                </span>
            </yd-ls-message-pearl>
            <i class="msg-text" v-if="hasDrag">没有更多记录了</i>
            <div v-for="(items,index) in contactList" :key="index">
              <i class="msg-text">{{ items.date }}</i>
              <yd-ls-message-pearl v-for="(datas,ind) in items.items" :key="ind" pos="right">
                <span slot="img"><img :src="datas.head"/></span>
                <span slot="message">
                  <p class="msg-con">{{ datas.content }}</p>
                </span>
              </yd-ls-message-pearl>
            </div>
            
            <div class="yd-ls-height" v-if="isHeight"></div>

          </yd-ls-message>
        </yd-pullrefresh>
      </div>
      <!-- 弹出电话 -->
      <yd-actionsheet :items="callitem" v-model="showcall" cancel="取消"></yd-actionsheet>

      
    </yd-ls-layout>
    <div class="yd-ls-contact-sent" id="footer">
      <yd-flexbox class="yd-ls-contact-sent-box">
        <yd-flexbox-item><input type="text" id="footer-input" @focus="inputFocus" @blur="inputBlur" v-model="msgtxt"></yd-flexbox-item>
        <yd-button type="primary" shape="circle" @click.native="sendMsg">发送</yd-button>
      </yd-flexbox>
    </div>
    <div id="mask" @click="mask"></div>
  </div>
</template>

<style>
  .yd-ls-contact-sent {
    width: 100%;
    bottom: 0;
    background-color: #fff;
    padding: 0.12rem 0;
    border-top: 1px solid #e5e5e5;
  }

  .yd-ls-contact-sent .yd-ls-contact-sent-box {
    padding: 0 0.12rem;
  }

  .yd-ls-contact-sent .ico-box {
    width: 0.8rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    background-color: #ccc;
    margin-right: 0.1rem;
  }

  .yd-ls-contact-sent .yd-btn {
    width: 0.8rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    margin-left: 0.1rem;
  }

  .yd-ls-contact-sent input {
    height: 0.8rem;
    border: 1px solid #e5e5e5;
    width: 100%;
    font-size: 0.28rem;
  }

  .yd-ls-contact-sent .yd-tabbar {
    padding-top: 0.12rem;
  }

  .yd-ls-contact-sent .yd-tabbar:after {
    border-top: 0;
  }

#footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    text-align: center;
    color: #fff;
    z-index: 999;
}
#mask{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0);
    z-index: 998;
    display: none;
}
</style>
<script>
  import ydLsBox from '../../../components/yd-ls-box.vue'
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsMessage from '../../../components/yd-ls-message.vue'
  import ydLsMessagePearl from '../../../components/yd-ls-message-pearl.vue'
  import ydLsButton from '../../../components/yd-ls-button.vue'
  import api from '../../../axios/api'

  export default {
    name: '',
    props: {},
    data() {
      return {
        urls: 'info.html',
        activePos: 'fixed',
        activeHei: '600',
        isHeight: true,
        msgtxt: '',
        showcall: false,
        callitem: [
          {
            label: api.default_phone_info,
            stay: true /* 不关闭 */
          },
          {
            label: api.default_phone,
            callback: () => {
              window.location.href = `tel:${api.default_phone.replace(/-/g,'')}`
            }
          }
        ],
        contactList: [],
        hasDrag: false,
        pageIndex: 1,
        pageSize: 8,
        totle: 0,
        contactHeader: api.default_img_assiant // 客服缺省头像
      }
    },
    created() {
      //TODO:初始化数据
      this.hasDrag = false
      this.contactList.length = 0 // 重新进页面清空消息列表缓存
      this.$dialog.loading.open(api.default_loading_txt);
      this.getContactLast()
      
      this.activeHei = document.body.scrollHeight
    },
    methods: {
      handleScroll(ev){
        ev.preventDefault();
      },
      inputFocus(ev) {
        let ftInput = document.getElementById("footer-input");
        let mask = document.getElementById("mask");
        setTimeout(function() {
          // 这两行就是关键代码 END
          footer.style.position = "relative";
          ftInput.scrollIntoView();
          
          mask.style.display = "block";
          mask.style.height = document.body.offsetHeight+"px";
        }, 100); 
        document.addEventListener("touchmove",this.handleScroll);
        this.rollBottom()
      },
      inputBlur() {
        let ftInput = document.getElementById("footer-input");
        let mask = document.getElementById("mask");
        setTimeout(function() {
          footer.style.position = "fixed";
          mask.style.display = "none";
          mask.style = "";
        }, 100);
        document.removeEventListener("touchmove",this.handleScroll);
      },
      mask() {
        let ftInput = document.getElementById("footer-input");
        let mask = document.getElementById("mask");
        ftInput.blur();
        mask.style.display = "none";
        mask.style = "";
        document.removeEventListener("touchmove",this.handleScroll);

      },
      getContactLast() {
        this.contactList.length = 0 // 重新进页面清空消息列表缓存
        this.axios.get(api.contact_last)
          .then(m=>{
            let contact_last_data = m.data
            if(!contact_last_data.data){
              this.hasDrag = true
            }else{
              this.hasDrag = false
              this.contactList = this.contactList.concat(contact_last_data.data)
            }
            this.$dialog.loading.close()
            this.rollBottom()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      rollBottom() {
        setTimeout(function() {
          document.getElementById('myData').scrollTop = document.getElementById('myData').scrollHeight
        }, 100);
      },
      loadList() {
        this.axios.get(api.contact_server, {
          params: {
            date: this.contactList[0].date
          }
        })
          .then(m=>{
            let contact_list_data = m.data
            if(!contact_list_data.data) {
              this.hasDrag = true
              this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad')
              return
            }
            this.contactList.splice(0, 0, contact_list_data.data);
            this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad')
            
          })
          .catch(err=>{
            this.hasDrag = true
            this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad')
          })
      },
      call () {
        this.showcall = true
      },
      sendMsg() {
        if(!this.msgtxt) {
          this.$dialog.notify({
            mes: '亲，不可以发空信息的哦！',
            timeout: 1500
          });
          return
        }
        this.$dialog.loading.open(api.default_loading_txt);
        let params = {
          content: this.msgtxt
        }
        this.axios.post(api.contact_submit, params)
          .then(m=>{
            this.getContactLast()
            this.msgtxt = ''
            this.hasDrag = false
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      }
    },
    mounted() {
    },
    watch: {
      msgList(){
        this.rollBottom()
      }
    },
    components: { ydLsBox, ydLsLayout, ydLsMessage, ydLsMessagePearl, ydLsButton }


  }
</script>
